<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
	font-family:"Arial","微軟正黑體";
}
/*卡片內文*/
.card_container {
	text-align: left;
	padding: 0 5%;
}

.card_span {
	margin: 0% 0 3% 0;
}

.card_spantitle {
	padding-top: 5%;
}

.card_spanchg {
	margin-left: 60%;
}

.lovecard {
	width: 580px;
	background-color: #EF5D60;
	border-radius: 5%;
	box-shadow: 4px 4px 12px 4px rgba(20%, 20%, 40%, 0.3);
	width: 580px;
}

.loveicondiv {
	width: 100%;
	text-align: center;
}

.loveicondiv img {
	width: 140px;
	height: 140px;
}

.loveicon {
	display: inline-block;
	margin: 0px 10px;
	padding-bottom: 35px;
}

.loveicondiv img:hover {
	opacity: 0;
	cursor: pointer;
}

.goat:hover {
	background: url(light/img/goat.png) no-repeat;
	background-size: 100% 80%;
}

.newyear:hover {
	background: url(light/img/newyear.png) no-repeat;
	background-size: 100% 90%;
}
/*heart*/
.heart {
	position: relative;
	width: 50px;
	height: 25px;
}

.heart::before, .heart::after {
	content: "";
	position: absolute;
	left: 40%;
	top: 0;
	width: 20px;
	height: 35px;
	background: red;
	border-radius: 50px 50px 0 0;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transform-origin: left bottom;
	-moz-transform-origin: left bottom;
	-o-transform-origin: left bottom;
	transform-origin: left bottom;
}

.heart::after {
	left: 0;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transform-origin: right bottom;
	-moz-transform-origin: right bottom;
	-o-transform-origin: right bottom;
	transform-origin: right bottom;
}

.heart {
	-webkit-animation: jump 1500ms infinite ease-out;
	-moz-animation: jump 1500ms infinite ease-out;
	-o-animation: jump 1500ms infinite ease-out;
	animation: jump 1500ms infinite ease-out;
}

@
-webkit-keyframes jump { 0%, 60%, 75%, 90%, 100% {
	-webkit-transform: scale(1);
}

15%
{
-webkit-transform
:
 
scale
(0
.6
);

		    
}
30%
{
-webkit-transform
:
 
scale
(1);

		    
}
45%
{
-webkit-transform
:
 
scale
(0
.7
);

		    
}
}
@
-moz-keyframes jump { 0%, 60%, 75%, 90%, 100% {
	-moz-transform: scale(1);
}

15%
{
-moz-transform
:
 
scale
(0
.6
);

		    
}
30%
{
-moz-transform
:
 
scale
(1);

		    
}
45%
{
-moz-transform
:
 
scale
(0
.7
);

		    
}
}
@
-o-keyframes jump { 0%, 60%, 75%, 90%, 100% {
	-o-transform: scale(1);
}

15%
{
-o-transform
:
 
scale
(0
.6
);

		    
}
30%
{
-o-transform
:
 
scale
(1);

		    
}
45%
{
-o-transform
:
 
scale
(0
.7
);

		    
}
}
@
keyframes jump { 0%, 60%, 75%, 90%, 100% {
	transform: scale(1);
}
15%
{
transform
:
 
scale
(0
.6
);

		    
}
30%
{
transform
:
 
scale
(1);

		    
}
45%
{
transform
:
 
scale
(0
.7
);

		    
}
}
</style>
</head>
<body>
	<div class="lovecard grid_6 grid_6_chg">
		<div class="card_container">
			<h3 class="card_span card_spantitle">
				<span class="">TO: example_receiver</span>
			</h3>
			<p id="preview_text">
			<h4>example_text</h4>
			</p>
			<h3 class="card_span card_spanchg">
				<span class="">From: example_sender</span>
			</h3>
		</div>
		<div class="loveicondiv">
			<div class="loveicon goat">
				<img src="light/img/love5.png" alt="">
			</div>
			<div class="loveicon heart">
				<i class="icn_red wow pulse" data-wow-iteration="infinite"
					data-wow-duration="500ms"></i>
			</div>
			<div class="loveicon newyear">
				<img src="light/img/love6.png" alt="">
			</div>
		</div>
	</div>


</body>
</html>